<template>
  <div class="chatContent">
    <template v-if="!defaultActive">
      <el-empty :image-size="200" />
    </template>
    <template v-else>
      <div class="chatContent-header flex">
        <span class="fs16">{{ defaultChat.title || '未命名对话' }}</span>
        <span class="fs12">{{ defaultChat.createTime | setTimeMini }}创建</span>
      </div>
      <el-scrollbar ref="chatContentScrollbar" style="height: 450px">
        <div ref="chatContentContent" class="chatContent-content">
          <div
            v-for="item in tableData"
            :key="item.id"
            :class="[
              item.userType === 'user' ? 'chatContent-content-itemUser' : 'chatContent-content-itemAdmin',
              'flex',
              'mt20'
            ]"
          >
            <Cimage :src="item[item.userType].avatar" width="50px" height="50px" fit="cover" class="mr15" />
            <div :style="item.userType === 'admin' ? 'display: flex;flex-direction: column;' : ''">
              <span>{{ item[item.userType].userName || '未命名昵称' }}</span>
              <div class="card flex mt5" style="align-self: flex-end;" v-html="item.content" />
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="chatContent-footer">
        <!-- 输入框 -->
        <el-input
          v-model="send.content"
          :autosize="{ minRows: 4}"
          type="textarea"
          placeholder="请输入内容"
          class="chatContent-footer-textarea"
          @keydown.native="listen($event)"
          @paste.native.capture.prevent="handlePaste"
        />
        <div class="chatContent-footer-button">
          <el-tooltip manual content="按Enter键发送，按Ctrl + Enter键换行" :open-delay="500" placement="bottom" effect="light">
            <el-button
              type="primary"
              size="small"
              :disabled="inputDisabled"
              @click="sendMessage(send.content, 'text')"
            >发 送</el-button>
          </el-tooltip>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { chatRecord } from '../utils/request'
import { mapGetters } from 'vuex'
export default {
  props: {
    defaultActive: {
      type: [String, Number],
      default: ''
    },
    defaultChat: {
      type: [Object, String],
      default: () => {}
    }
  },
  data() {
    return {
      listQuery: {
        type: 'admin', // 账号类型
        page: 1,
        size: 999,
        total: 0
      },
      tableData: [], // 列表数据
      send: { // 发送数据
        content: '' // 消息内容
      },
      inputDisabled: false // 发送按钮是否禁用
    }
  },
  computed: {
    ...mapGetters(['id'])
  },
  watch: {
    defaultActive: {
      handler(n) {
        console.log(this.$parent.$data, '父组件')
        this.listQuery = { // 每次切换聊天组清空分页和数据
          type: 'admin', // 账号类型
          page: 1,
          size: 999,
          total: 0
        }
        this.tableData = []
        this.getList(n)
      }
    },
    'send.content': {
      handler(n) {
        if (!n) {
          this.inputDisabled = true
        } else {
          this.inputDisabled = false
        }
      },
      immediate: true
    }
  },
  methods: {
    // 发送消息
    sendMessage(message, type) {
      if (!message) {
        this.$message.error('不能发送空白消息')
        return
      }
      const data = {
        id: this.defaultChat.userId, // 接收人id
        userType: 'user', // 接收人用户类型
        messageType: type, // 消息类型
        content: message // 消息内容
      }
      this.$eventBus.$emit('ws_send', data) // 发送消息
      setTimeout(() => {
        this.getList(this.defaultActive)
        this.send = { // 发送数据
          content: '' // 消息内容
        }
      }, 400)
    },
    handlePaste(e) { // 输入框 监听剪切板
    },
    // 输入框 文本域 改变快捷键 同步微信方式
    listen(event) {
      event.preventDefault() // 阻止浏览器默认换行操作
      if (event.keyCode === 13 && !event.ctrlKey) { // 回车
        this.sendMessage(this.send.content, 'text') // 发送文本
        return false
      } else if (event.ctrlKey && event.keyCode === 13) { // 换行
        this.send.content += '\r\n'
      }
    },
    // 初始化获取数据
    async getList(groupId) {
      const { code, data } = await chatRecord({ groupId, ...this.listQuery })
      if (code === 0) {
        this.tableData = data.list.reverse()
        this.listQuery.total = data.total

        this.$nextTick(() => {
          this.$refs.chatContentScrollbar.update() // scrollbar组件的内置更新 滚动条尺寸方法
        })
        this.focusContentBottom() // 聚焦到内容底部
        this.$emit('updateMenu') // 每次刷新更新侧边聊天组
        this.$eventBus.$emit('updateReadCount') // 更新全局顶部消息提示数量
      }
    },
    // 聚焦到内容底部
    focusContentBottom() {
      this.$nextTick(() => {
        this.$refs.chatContentContent.scrollIntoView(false)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chatContent{
  width: 100%;
  height: 100%;
  &-header{
    border-bottom: 1px solid #e6e6e6;
    height: 50px;
    justify-content: space-between;
    padding: 0 20px;
  }
  &-content{
    height: 100%;
    padding: 0 20px;
    height: 100%;
    &-itemUser{
      .card{
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        background: #fff;
        padding: 10px;
        width: fit-content;
      }
    }
    &-itemAdmin{
      flex-direction: row-reverse;
      .card{
        border: 1px solid #e6e6e6;
        border-radius: 6px;
        background: #C0C4CC;
        padding: 10px;
        width: fit-content;
      }
    }
  }
  &-footer{
    border-top: 1px solid #e6e6e6;
    height: 150px;
    background-color: #f5f5f5;
    &-textarea{
      ::v-deep .el-textarea__inner{
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #303133 !important;
        background-color: #f5f5f5;
        background-image: none;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
      }
      ::v-deep .el-textarea__inner:hover {
        border-color: #f5f5f5;
      }
    }
    &-button{
      width: 100%;
      text-align: right;
      padding-right: 20px;
    }
  }
}
</style>
